<template>
  <el-row style="margin: 10px 0">
    <el-button type="primary" @click="dialogVisible=true;ruleForm={}">新增</el-button>
  </el-row>
  <el-table :data="tableData" border v-loading="loading" max-height="650" height="650">
    <el-table-column prop="username" label="用户名称"/>
    <el-table-column prop="nickname" label="用户昵称"/>
    <el-table-column fixed="right" label="操作" width="120">
      <template #default="scope">
        <el-button type="text" size="small"
                   @click="handleEdit(scope.row)"
        >编辑
        </el-button
        >
        <el-popconfirm title="确定刪除?" @confirm="handleDelete(scope.row.id)">
          <template #reference>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <el-dialog
      v-model="dialogVisible"
      title="用户信息"
      width="30%"
      :before-close="handleClose"
  >
    <el-form
        ref="ruleForm"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
    >
      <el-form-item label="用户名称" prop="username">
        <el-input
            v-model="ruleForm.username"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户昵称" prop="nickname">
        <el-input
            v-model="ruleForm.nickname"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save"
        >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  name: "User.vue",
  data() {
    return {
      ruleForm: {
        username: '',
        nickname: '',
        id: ''
      },
      loading: false,
      rules: {
        username: [{required: true, trigger: 'blur'}],
        nickname: [{required: true, trigger: 'blur'}]
      },
      dialogVisible: false,
      tableData: []
    }
  },
  mounted() {
    this.list();
  },
  methods: {
    handleDelete(id) {
       this.$http.delete(`/flowableapi/user/${id}`).then((res) => {
         if (res.data && res.data.success) {
           this.$message.warning('删除成功');
           this.list();
         }
       })
    },
    handleEdit(row) {
      this.ruleForm = row;
      this.dialogVisible = true;
    },
    handleClose() {
      this.dialogVisible = false;
    },
    save() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          if (this.ruleForm.id) {
            this.$http.put(`/flowableapi/user/${this.ruleForm.id}`, this.ruleForm).then((res) => {
              if (res.data && res.data.success) {
                this.$message.success('编辑成功');
                this.dialogVisible = false;
                this.list();
              }
            })
          } else {
            this.$http.post('/flowableapi/user/save', this.ruleForm).then((res) => {
              if (res.data && res.data.success) {
                this.$message.success('保存成功');
                this.dialogVisible = false;
                this.list();
              }
            })
          }
        }
      })
    },
    list() {
      this.loading = true;
      this.$http.get(`/flowableapi/user/list`).then((res) => {
        if (res.data && res.data.success) {
          this.tableData = res.data.data;
        }
        this.loading = false;
      })
    }
  }
}
</script>

<style scoped>

</style>